<php>$rand_key = time() . mt_rand(10000,99999);</php>
<div id="uploader-demo" class="" style="position: absolute;
    top: 0;
    width: 90px;
    height: 90px;
    background: red;
    opacity: 0;">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list uploadify-button " style="height: 36px; line-height: 36px; width: 80px;"></div>
    <div id="upload_picture_{$rand_key}" style="top: -16px;
    left: 19px;
    width: 80px;
    height: 36px;">选择图片</div>
</div>
<div class="upload-img-box J-uib-{$rand_key}">
    <div style="display: none;"></div><!-- 新增一个隐藏层，解决无图片的时候初始化图片拖拽排序插件失败的问题 -->
    <input type="hidden" name="{$param.name}" value="{$param.path}" class="icon" />
    <notempty name="param.path">
        <div class="upload-pre-item J_item_{$rand_key}" id="item_{$vo['id']}_{$rand_key}">
            <img src="{$param.path}"/>
            <span class='btn-close delPic' title='删除图片' data-rand='{$rand_key}'></span>
        </div>
    </notempty>
</div>

<link rel="stylesheet" type="text/css" href="__JS__/webuploader/webuploader.css">
<script type="text/javascript" src="__JS__/lib/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="__JS__/webuploader/webuploader.js"></script>
<script type="text/javascript">
    $(function(){

        /*    if($(".J_item_{$rand_key}").size() > 0){
         $("#uploader-demo").hide();
         }*/
        var root_path = '{$root}';
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: "__JS__"+'/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id:"#upload_picture_{$rand_key}",

            },
            compress: false,
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'jpg,jpeg,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            }

        });
        if($(".J_item_{$rand_key}").size() > 0){
            $("#uploader-demo").hide();
        }

        uploader.on( 'uploadSuccess' , function( file ,response) {
         //  console.log(response);
            if(response.status == 0){
                $.ui.alert('上传失败，请重新上传试试');
            }else{
                $('#upload_picture_{$rand_key}').val(response.id);
                if( $('#upload_picture_{$rand_key}').val()){
                    $("#uploader-demo").hide();
                }

                //创建<div class="upload-pre-item">
                var upload_item = $("<div class='upload-pre-item' id='item_" + response.id + "_{$rand_key}'></div>");
                //创建img input close-btn
                $(".J-uib-{$rand_key} input[name='{$param.name}']").val(response.id);
                src = response.url || '__ROOT__' + response.path;
                var upload_img = $("<img src=" + src + " data-id=" + response.id + ">");
                var img_del = $("<span class='btn-close delPic' title='删除图片' data-rand='{$rand_key}'></span>");

                //加入到upload-img-box
                upload_item.append(upload_img);
                upload_item.append(img_del);
                $('.J-uib-{$rand_key}').append(upload_item);
                $('.uploadify-queue').html('');
                $.ui.alert('上传成功');
            }
        });


        $(document).on("click",".delPic",function(){
            $("#upload_picture_"+ $(this).data('rand')).show();
            $(".J-uib-"+ $(this).data('rand') +" input[name='{$param.name}']").val('');
            $(this).parent().remove();
            $("#uploader-demo").show();
            uploader.refresh();
        });


    })

</script>